<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="is_edit == 0 ? 18 : 24">
        <el-table :data="form" :show-header="true" size="mini">
          <el-table-column label="排序" width="50">
            <template slot-scope="item" v-if="item.$index > 1 && is_edit == 0">
              <div class="form-sort">
                <i class="el-icon-sort-down" @click="formSort(item,1)"></i>
                <i class="el-icon-sort-up" @click="formSort(item,2)"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="70" align="center">
            <template slot-scope="item">
              <el-button icon="el-icon-delete"  @click="deleteForm(item)" v-if="item.$index > 1  && is_edit == 0" size="mini" class="com-btn"></el-button>
              <!-- <i class="el-icon-delete" @click="deleteForm(item)" v-if="item.$index > 1  && is_edit == 0"></i> -->
            </template>
          </el-table-column>
          <el-table-column label="必填" width="80">
            <template slot-scope="item" v-if="item.$index > 1">
              <el-checkbox v-model="item.row.not_null" @change="changeNotNull(item)" :disabled = "is_edit == 0 ? false : true">必填</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="报名项" width="150">
            <template slot-scope="item">
              <template>
                <el-input placeholder="请输入报名项名称" v-model="item.row.name" v-if="item.row.is_diy" size="mini"></el-input>
                <span v-else>{{item.row.name}}</span>
              </template>
              <div v-if="item.row.type == 'date'" style="margin-top:10px;">
                <span style="margin-right:20px;">日期限定</span>
                <el-switch v-model="item.row.limit" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报名项设置">
            <template slot-scope="item">
              <el-input :placeholder="'请输入'+item.row.name" v-if="item.row.type == 'text'" readonly size="mini"></el-input>
              <el-input
                :placeholder="'请输入'+item.row.name"
                v-if="item.row.type == 'number'"
                type="number"
                readonly
                size="mini"
              ></el-input>
              <el-input
                :placeholder="'请输入'+item.row.name"
                v-if="item.row.type == 'textarea'"
                type="textarea"
                readonly
                size="mini"
              ></el-input>
              <template v-if="item.row.type == 'date'">
                <el-date-picker type="datetime" placeholder="选择日期" size="mini"></el-date-picker>
                <div style="margin-top:5px;" v-if="item.row.limit">
                  <el-date-picker type="datetime" placeholder="选择日期" v-model="item.row.data[0]" value-format="timestamp" size="mini"></el-date-picker>
                  <span style="margin:0 5px;">至</span>
                  <el-date-picker type="datetime" placeholder="选择日期" v-model="item.row.data[1]" value-format="timestamp" size="mini"></el-date-picker>
                </div>
              </template>
              <el-radio-group v-if="item.row.type == 'radio'" v-model="item.row.limit" >
                <el-radio :label="items.value" v-for="items in item.row.data">{{items.label}}</el-radio>
              </el-radio-group>
              <div v-if="item.row.type == 'select'">
                <template v-if="item.row.is_diy">
                  <el-input size="mini"
                    v-for="(items,keys) in item.row.data"
                    v-model="items.label"
                    placeholder="请输入选项"
                    class="form-select-input"
                    :readonly="is_edit == 0 ? false : true"
                    @input="inputSelect(item.$index,keys)"
                  >
                    <template slot="append">
                      <div
                        style="display:block;width:100%;height:100%;"
                        @click="deleteSelectItem(item,keys)"
                      >
                        <i class="el-icon-close"></i>
                      </div>
                    </template>
                  </el-input>
                </template>
                <template v-else>
                  <span class="form-select" v-for="items in item.row.data">{{items.label}}</span>
                </template>

                <span
                  v-if="item.row.is_diy && is_edit == 0"
                  class="form-select form-select-add"
                  @click="addSelectItem(item)"
                >
                  <i class="el-icon-plus"></i>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6" v-if="is_edit == 0">
        <window-title title="标准项"></window-title>
        <div class="com-list">
          <el-button
            v-for="(item,key) in tag_list"
            :key="key"
            size="mini"
            :class="item.select ? 'tag-btn com-btn' : 'tag-btn'"
            @click="selectCom(key)"
            type="info" plain
          >{{item.name}}</el-button>
        </div>
        <window-title title="自定义项"></window-title>
        <div class="com-list">
          <el-button
            v-for="(item,key) in diy_tag"
            :key="key"
            size="mini"
            class="tag-btn"
            @click="selectDiy(key)"
            type="info" plain
          >{{item.name}}</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import windowTitle from "../../../../components/unit/title.vue";

export default {
  components: { windowTitle },
  props:{ form:{} , is_edit : {}},
  data() {
    return {
      tag_list: [
        {
          name: "身份证",
          not_null: false,
          type: "text",
          select: false,
          is_diy: false,
          data: []
        },
        {
          name: "国籍",
          not_null: false,
          type: "text",
          select: false,
          is_diy: false,
          data: []
        },
        {
          name: "性别",
          not_null: false,
          type: "radio",
          select: false,
          is_diy: false,
          data: [
            { value: 0, label: "不限定" },
            { value: 1, label: "限定男" },
            { value: 2, label: "限定女" }
          ],
          limit: 0
        },
        {
          name: "出生日期",
          not_null: false,
          type: "date",
          select: false,
          is_diy: false,
          data:  ["", ""],
          limit: 0,
        },
        {
          name: "职业",
          not_null: false,
          type: "text",
          select: false,
          is_diy: false,
          data: []
        },
        {
          name: "邮箱",
          not_null: false,
          type: "text",
          select: false,
          is_diy: false,
          data: []
        },
        {
          name: "血型",
          not_null: false,
          type: "text",
          select: false,
          is_diy: false,
          data: []
        },
        {
          name: "学历",
          not_null: false,
          type: "select",
          select: false,
          is_diy: false,
          data: [
            { value: 1, label: "小学" },
            { value: 2, label: "初中" },
            { value: 3, label: "高中" },
            { value: 4, label: "专科" },
            { value: 5, label: "本科" },
            { value: 6, label: "硕士" },
            { value: 7, label: "博士" }
          ]
        },
        {
          name: "联系地址",
          not_null: false,
          type: "text",
          select: false,
          is_diy: false,
          data: []
        },
        {
          name: "政治面貌",
          not_null: false,
          type: "text",
          select: false,
          is_diy: false,
          data: []
        }
      ],
      diy_tag: [
        {
          name: "单行文本框",
          data: {
            name: "单行文本框",
            not_null: false,
            type: "text",
            select: false,
            is_diy: true,
            data: []
          }
        },
        {
          name: "多行文本框",
          data: {
            name: "多行文本框",
            not_null: false,
            type: "textarea",
            select: false,
            is_diy: true,
            data: []
          }
        },
        {
          name: "数字文本框",
          data: {
            name: "数字文本框",
            not_null: false,
            type: "number",
            select: false,
            is_diy: true,
            data: []
          }
        },
        {
          name: "下拉选择框",
          data: {
            name: "下拉选择框",
            not_null: false,
            type: "select",
            select: false,
            is_diy: true,
            data: [{ value: 1, label: "选项" }]
          }
        },
        {
          name: "日期",
          data: {
            name: "日期",
            not_null: false,
            type: "date",
            select: false,
            is_diy: true,
            data:  ["", ""],
            limit: 0,
          }
        },
        {
          name: "图片",
          data: {
            name: "图片",
            not_null: false,
            type: "image",
            select: false,
            is_diy: true,
            data: []
          }
        }
      ],
    };
  },
  mounted() {
    this.checkInArr();
  },
  methods: {
    selectCom(key) {
      var form = this.tag_list[key];
      if (form.select) return false;
      this.form.push(form);
      this.checkInArr();
    },
    selectDiy(key) {
      var form = JSON.parse(JSON.stringify(this.diy_tag[key].data));
      if (form.select) return false;
      this.form.push(form);
      this.checkInArr();
    },
    //判断数组中是否存在
    checkInArr() {
      for (var i in this.tag_list) {
        this.tag_list[i].select = false;
        for (var y in this.form) {
          if (this.tag_list[i].name == this.form[y].name) {
            this.tag_list[i].select = true;
          }
        }
      }
    },
    //删除
    // deleteForm(data) {
    //   this.form.splice(data.$index, 1);
    //   this.checkInArr();
    // },
    //表单排序
    formSort(data, param) {
      var data = {index:data.$index,param:param};
      this.$emit('formsort',data);
    },
    //删除
    deleteForm(data) {
      
      this.$emit('delete',data.$index);
      this.checkInArr();
      // this.form.splice(data.$index, 1);
    },
    //添加select组件option
    addSelectItem(data) {
      var data_item = this.form[data.$index].data;
      var len = data_item.length;
      var temp = { value: len + 1, label: "选项" };
      this.form[data.$index].data.push(temp);
      var emit_data = {index:data.$index};
      this.$emit('changeselect',emit_data);
    },
    //删除select组件option
    deleteSelectItem(data, keys) {
      var data_item = this.form[data.$index].data;
      var len = data_item.length;
      if (len == 1) {
        return this.toast(0, "不能少于1");
      }
      this.form[data.$index].data.splice(keys, 1);
      var emit_data = {index:data.$index};
      this.$emit('changeselect',emit_data);
    },
    //修改select选项内容
    inputSelect(index,key){
      var emit_data = {index:index,key:key,label:this.form[index].data[key].label};
      this.$emit('selectinput',emit_data);
    },
    changeNotNull(item){
      var data = {key:item.$index,res:item.row.not_null};
      this.$emit('changenull',data);
    }
  },
  watch:{

  }
};
</script>

<style>
.com-list {
  width: 100%;
  margin-bottom: 10px;
}
.tag-btn {
  margin-top: 10px;
  margin-left: 0 !important;
  margin-right: 10px;
}
.pay-price {
  margin: 0 10px;
  margin-left: 40px;
}
.pay-price-input {
  width: 200px;
}
.form-select {
  position: relative;
  display: inline-block;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  border: 1px solid #e1e1e1;
  margin-right: 5px;
  border-radius: 3px;
}
.form-select i {
  cursor: pointer;
  margin-left: 3px;
}
.form-select-add {
  float: left;
  margin-left: 5px;
}
.form-select-input {
  width: 120px;
  float: left;
  margin: 0 3px 3px 0;
}
.form-sort i {
  cursor: pointer;
}
.add-new-form {
  text-align: center;
  width: 200px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  margin: 10px auto;
  cursor: pointer;
}
.add-new-form i {
  margin-right: 5px;
}
.edit-itme {
  height: 200px;
  margin-bottom: 80px;
}
.el-input-group__append {
  width: 30px;
  text-align: center;
}
</style>